<template>
  <div class="see">
    <div class="seesee">
      <img src="../../img/see1.png" alt="">
      <span>看看</span>
      <van-icon name="arrow" class="icc"/>
    </div>
    <div class="gedanss">
      <ul>
        <li v-for="(key,item) in textarr">
          <span><img :src=imgarr[item] alt=""></span>
          <br>
          <span class="text">
           {{key}}
          </span>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
    export default {
        name: "seesee",
      data(){
        return{
          textarr:['新主播求关注','正在唱你最喜欢的歌',
          '00后新主播 治愈系积极向上少'],
          imgarr:[require('../../img/see2.png'),require('../../img/see3.png'),require('../../img/see4.png')
            ]
        }
      }
    }
</script>

<style lang="scss">
  .see{
    .seesee{
      box-sizing: border-box;
      padding: 50px 15px 40px 15px;
      font-size: 45px;
      font-weight: bold;
      img{
        width: 60px;
        vertical-align: middle;
      }
      .icc{
        width: 27px;
        vertical-align: middle;
      }
    }
    .gedanss{
      box-sizing: border-box;
      padding: 0 15px 0 15px;

      ul{

        font-size: 0;

        li{
          width: 33.3333333%;
          list-style: none;
          display: inline-block;
          font-size: 30px;
          padding-bottom: 60px;
          box-sizing: border-box;
          .text{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            box-sizing: border-box;
            padding-left: 15px;
            -webkit-box-orient: vertical;
            height: 95px;
            width: 340px;
            font-size: 35px;
          }
          img{
            width: 395px;
            height: 525px;
          }
        }
      }
    }
  }

</style>
